<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>本地爬虫</title>
    <script src="../static/zyupload/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/zyupload/css/zyupload-1.0.0.min.css" type="text/css">
    <script type="text/javascript" src="../static/zyupload/js/zyupload-1.0.0.min.js"></script>
    <link href="../static/fancy/demo.css" rel="stylesheet" type="text/css">
    <script src="../static/fancy/jquery.fancy-textbox.js" type="text/javascript"></script>
    <link href="../static/fancy/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="../static/fancy/fancy-textbox.css" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/x-icon" href="../static/favicon.ico">
    <link href="../static/button/css/button.css" media="all" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="../static/fancy/fancy-textbox-ie.css"/>
    <![endif]-->
<body style="background-color: #f8f6ed">
<h1 style="text-align:center;">HTML本地文件爬虫解析器</h1>
<div style="align-content: center;text-align: center;">
    <div class="fancy-textbox-wrapper flip">
        <strong style="color: #00b7ee">注意：此处操作均会基于最后一次成功爬取结果进行处理!(选填)</strong>
        <form id="form" action="#">
            <input name="param" type="text" data-animation="flip" id="param" data-icon="icon-ok"
                   class="fancy-textbox masked"
                   style="text-indent: 45px;width: 500px;background-color: #00b7ee"/>
            <i class="icon-ok"></i>
            <div style="width: 100%">
                <a class="button-a" href="#" onclick="filter('filter');">分析检索内容</a>
                <a class="button-a" href="#" onclick="filter('webpy');">爬取网页</a>
                <a class="button-a" href="#" onclick="filter('regcus');">定义检索条件</a>
            </div>
        </form>
    </div>
</div>
<div style="align-content: center;text-align: center;">
    <div id="zyupload" class="zyupload" style="width: 650px; height: 400px;"></div>
</div>
<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "800px",
            height: "400px",
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "/upload",              // 上传文件的路径
            fileType: ["html", "HTML"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                $("#uploadList_" + file.index).fadeOut();
                console.info("剩下的文件");
                console.info(files)
            },
            onProgress: function (file, loaded, total) {
                var eleProgress = $("#uploadProgress_" + file.index),
                    percent = (loaded / total * 100).toFixed(2) + "%";
                if (eleProgress.is(":hidden")) {
                    eleProgress.show()
                }
                eleProgress.css("width", percent)
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                if (jQuery.trim(response) === '') {
                    $("#uploadInf").html("<h2>检查一下检索内容吧~没有找到符合的过滤数据呢!</h2>");
                    indexSub = 0;
                } else {
                    console.info("此文件上传成功：");
                    console.info(file.name);
                    console.info("此文件上传到服务器地址：");
                    console.info(response);
                    let $uploadInf = $("#uploadInf");
                    let subDiv = ".uploadInfBar" + indexSub;
                    let subInfDiv = ".uploadInfSub" + indexSub;
                    $uploadInf.html('');
                    $uploadInf.append('<div><div id="uploadInfBar' + indexSub + '" class="uploadInfBar' + indexSub + '" style="height: 20px;background-color: #232321;border-radius: 10px"><strong>↑↓</strong></div>'
                        + "<div class='uploadInfSub" + indexSub + "'><h2>上传成功：</h2><pre><strong>" + response + "</strong></pre></div></div>");
                    $uploadInf.on("click", subDiv, function (e) {
                        $(subInfDiv).toggle();
                    });
                    indexSub = indexSub + 1;
                }
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
                $("#uploadInf").html("<h2>请求异常：</h2><pre><strong>" + response + "</strong></pre>");
                indexSub = 0;
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
        $('input').ftext();
    });
    let indexSub = 0;

    function filter(str) {
        $.ajax({
            url: '/' + str + '?t=' + Math.random(),
            data: $('#form').serialize(),                 //将表单数据序列化，格式为name=value
            type: 'POST',
            dataType: 'text',
            success: function (data) {
                if (jQuery.trim(data) === '') {
                    $("#uploadInf").html("<h2>检查一下检索内容吧~没有找到符合的过滤数据呢!</h2>");
                    indexSub = 0;
                } else {
                    let $uploadInf = $("#uploadInf");
                    let subDiv = ".uploadInfBar" + indexSub;
                    let subInfDiv = ".uploadInfSub" + indexSub;
                    $uploadInf.html('');
                    $uploadInf.append('<div><div id="uploadInfBar' + indexSub + '" class="uploadInfBar' + indexSub + '" style="height: 20px;background-color: #232321;border-radius: 10px"><strong>↑↓</strong></div>'
                        + "<div class='uploadInfSub" + indexSub + "'><h2>上传成功：</h2><pre><strong>" + data + "</strong></pre></div></div>");
                    $uploadInf.on("click", subDiv, function (e) {
                        $(subInfDiv).toggle();
                    });
                    indexSub = indexSub + 1;
                }
            },
            error: function (data) {
                console.log("提交ajax函数异常");
                $("#uploadInf").html("<h2>请求异常</h2><pre><strong>" + data + "</strong></pre>");
                indexSub = 0;
            },

        });
    }
</script>
</body>
</html>
